<template>
  <div>
    <sl-table
      :list="list"
      @handleSelectionChange="handleSelectionChange"
      :columns="columns"
      :operates="operates"
      :height="height"
      v-model:pageModel="pageModel"
      @search="search"
    >
    </sl-table>
  </div>
</template>
<script>
import slTable from "@/components/table";
import { defineComponent, reactive, toRefs } from "vue";
import { list, columns_test } from './tableConfig'
export default defineComponent({
  components: { slTable },
  setup() {
    // 选中行
    const handleSelectionChange = val => {
      console.log("handleSelectionChange-val:", val);
    };
    // 编辑
    const handleEdit = (index, row, idx) => {
      console.log("index:", index, idx);
      console.log("row:", row);
    };
    // 删除
    const handleDel = (index, row) => {
      console.log(" index:", index);
      console.log(" row:", row);
    };
    
    const state = reactive({
      pageModel: {
        page: 1,
        limit: 10,
        total: 7,
      },
      // height:"500px",
      list:[], // table数据
      columns: [], // 需要展示的列
      operates: {
        width: 200,
        fixed: "right",
        list: [
          {
            id: "1",
            label: "编辑",
            type: "warning",
            show: true,
            plain: true,
            disabled: false,
            method: (index, row, ss) => {
              handleEdit(index, row, ss);
            }
          },
          {
            id: "2",
            label: "删除",
            type: "danger",
            show: true,
            plain: false,
            disabled: false,
            method: (index, row) => {
              handleDel(index, row);
            }
          }
        ]
      } // 列操作按钮
    });

    state.list = list
    state.columns = columns_test
    const search = () => {
      state.list = [...state.list]
      console.log(state.pageModel, 'state.pageModel')
    }
    return {
      ...toRefs(state),
      handleSelectionChange,
      handleEdit,
      handleDel,
      search,
    };
  }
});
</script>
